<template>
  <u-form labelWidth="auto">
    <view>
      <view style="display: flex">
        <view>
          <template v-if="contentflag">
            <view class="option" style="width: 520rpx">
              <view class="lf">项目名称</view>
              <view class="rl">{{ item.projectId? filterMultiDictText(this.dictOptions['projectId'], item.projectId + '') : '' }}</view>
            </view>
						<view class="option" style="width: 520rpx">
						  <view class="lf">项目编号</view>
						  <view class="rl">{{ item.projectCode }}</view>
						</view>
						<view class="option" style="width: 520rpx">
						  <view class="lf">业绩归属年度</view>
						  <view class="rl">{{ item.projectYear }}</view>
						</view>
            <view class="option" style="width: 520rpx">
              <view class="lf">合同类型</view>
              <view class="rl">{{ item.contractType? filterMultiDictText(this.dictOptions['contractType'], item.contractType + '') : '' }}</view>
              <!-- <view class="rl">{{ item.contractType == 1 ? '项目类' : '非项目类' }}</view> -->
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">合同名称</view>
              <view class="rl">{{ item.contractType? item.contractType == 1 ? filterMultiDictText(this.dictOptions['projectContractId'], item.contractId + '') : filterMultiDictText(this.dictOptions['contractId'], item.contractId + '') : '' }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">本次预付金额（元）</view>
              <view class="rl">{{ item.currentPaidAmount }}</view>
            </view>
          </template>
          <template v-if="!contentflag">
            <view class="option" style="width: 520rpx">
              <view class="lf">费用报销单</view>
              <view class="rl">{{ filterMultiDictText(this.dictOptions['relReimbursementBillId'], item.relReimbursementBillId + '') }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">应付（元）</view>
              <view class="rl">{{ item.payableAmount }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">已付（元）</view>
              <view class="rl">{{ item.paidAmount }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">扣款（元）</view>
              <view class="rl">{{ item.deductionAmount }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">本次扣款（元）</view>
              <view class="rl">{{ item.currentDeductionAmount }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">本次支付（元）</view>
              <view class="rl">{{ item.currentPaidAmount }}</view>
            </view>
            <view class="option" style="width: 520rpx">
              <view class="lf">未付款（元）</view>
              <view class="rl">{{ item.unpaidAmount }}</view>
            </view>
          </template>
        </view>

        <view style="flex: 1; display: flex; align-items: center; justify-content: flex-end" v-if="!isBtn">
          <u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="handleEidtForm(item, index)"></u-icon>
          <u-line direction="col" length="20" margin="0 10rpx"></u-line>
          <u-icon name="trash-fill" color="red" size="20" @click="handleRemoveForm(item)"></u-icon>
        </view>
      </view>
    </view>
  </u-form>
</template>

<script>
import { initDictOptions, filterMultiDictText } from '@/utils/JDictSelectUtil.js'

export default {
  name: 'PaymentFormInfo',
  data() {
    return {
      loading: false,
      filterMultiDictText
    }
  },
  props: {
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => {},
    },
    contentflag: {
      type: Boolean,
      default: false,
    },
		// 是否展示编辑删除按钮 默认展示
		isBtn: {
      type: Boolean,
      default: false,
    },
    dictOptions: {
      type: Object,
      default: () => {}
    },
  },
  methods: {
    handleEidtForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
      uni.showModal({
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('remove', item)
          }
        },
      })
    },
  },
}
</script>

<style scoped>
.info-form-bg {
  padding: 10upx;
  border-radius: 10upx;
  background-color: #fff;
}
.del-btn {
  float: left;
  width: 100upx;
}
</style>
